<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<u-navbar :placeholder="true" :autoBack="true" title="个人资料"></u-navbar>
		<view class="bg-white flex align-center justify-center padding-lg">
			<view class="avatarUrl-box">
				<image :src="info.avatarUrl" mode="scaleToFill" class="avatarUrl-img">
				</image>
				<button class="img-box-txt" open-type="chooseAvatar" v-on:chooseavatar="onChooseAvatar">
					修改头像
				</button>
			</view>
		</view>
		<view class="margin-sm bg-white padding-sm">
			<view class="flex justify-between">
				<view class="flex align-center justify-start">
					<text>昵称</text>
					<text class="margin-left-lg">{{info.nickName}}</text>
				</view>
				<view @click="editNickName(info.nickName)" class="cuIcon-right"></view>
			</view>
			<u-line dashed margin="10px 0px 10px 0"></u-line>
			<view class="flex align-center justify-between">
				<view>
					<text>手机</text>
					<text class="margin-left-lg">{{info.phone}}</text>
				</view>
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
					class="cu-btn sm bg-blue">更换手机号</button>
			</view>
		</view>
		<view class="flex align-center justify-center margin-top-xl">
			<button @click="showModal=true" class="bg-red  cu-btn lg" style="width: 90%;">退出登录</button>
		</view>
		<u-modal :show="showModal" title="提示" content="确认要退出登录么？" showCancelButton @cancel="showModal=false"
			@confirm="logOut"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				showModal: false
			}
		},
		onLoad() {
			this.info = uni.getStorageSync('UserInfo').user;
		},
		created() {
			let app = getApp();
			app.getUserInfo();
		},
		methods: {
			onChooseAvatar(e) {
				this.info.avatarUrl = e.detail.avatarUrl;
				uni.showLoading();
				let that = this;
				uni.$u.http.upload('/Customer/UpdateUserAvatar', {
					filePath: that.info.avatarUrl,
					name: 'file',
				}).then(res => {

					console.log(res);
					let vm = uni.getStorageSync('UserInfo');
					vm.user.avatarUrl = res.data;
					uni.setStorage({
						key: "UserInfo",
						data: vm
					});
				}).catch(err => {

				});

			},
			//更新用户手机号
			getPhoneNumber(e) {
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					this.getPhoneLoading = false;
					this.$refs.uToast.show({
						message: '获取手机号失败！',
						type: 'error',
						position: 'top'
					});
					return;
				} else {
					let that = this;
					let vm = uni.getStorageSync('UserInfo');
					uni.showLoading();
					uni.$u.http.post('/Customer/GetPhoneNumber', {
						id: vm.user.userid,
						entrydata: e.detail.encryptedData,
						iv: e.detail.iv
					}).then(res => {
						that.$refs.uToast.show({
							message: '更新成功',
							type: 'success',
							position: 'top'
						});
						that.info.phone = res.data;
						vm.user.phone = res.data;
						uni.setStorage({
							key: "UserInfo",
							data: vm
						});
					})
				}
			},
			editNickName(nickname) {
				uni.navigateTo({
					url: '/pagesA/user/editnickname?nickname=' + nickname,
				})
			},

			logOut() {
				uni.setStorage({
					key: "UserInfo",
					data: null
				});
				this.$u.vuex('UserInfo', null);
				uni.switchTab({
					url: '/pages/index/storeindex'
				})
			}

		}
	}
</script>

<style scoped>
	.avatarUrl-box {
		width: 200rpx;
		height: 200rpx;
		border-radius: 200rpx;
		overflow: hidden;
		position: relative;
	}

	.avatarUrl-img {
		width: 200rpx;
		height: 200rpx;
	}


	.img-box-txt {
		height: 40rpx;
		font-size: 20rpx;
		width: 100%;
		background: #999;
		color: #fff;
		position: absolute;
		bottom: 0px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.avatarUrl-bottom {
		background: #999;
		position: relative;
		bottom: 0px;
		width: 100%;
		height: 30px;
	}
</style>
